<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://cdn.socket.io/4.7.5/socket.io.min.js" integrity="sha384-2huaZvOR9iDzHqslqwpR87isEmrfxqyWOF7hr7BY6KG0+hVKLoEXMPUJw3ynWuhO" crossorigin="anonymous"></script>
  <title>$Title$</title>
</head>
<body>
<div class="btnGroup">
  <img src="" alt="">
  <br>
  <button>生成Token</button>
  <button>删除Token</button>
  <br>
  <br>
  <input type="file">
  <br>
  <br>
  <input type="file" multiple>
  <br>
  <br>
  <button>查询</button>
  <button>新增</button>
  <button>修改</button>
  <button>删除</button>
  <br>
  <br>
  <button>OpenSocket</button>
  <button>SendSocket</button>
  <button>CloseSocketServer</button>
</div>
</body>

<script>
  const btnDoms = document.querySelectorAll('button')
  const fileDoms = document.querySelectorAll('input')
  const imgDom = document.querySelector('img')
  let socket = null

  axios.interceptors.request.use(config => {
    config.headers.Authorization = localStorage.getItem('token')
    return config
  }, error => {
    return Promise.reject(error)
  })

  fileDoms[0].addEventListener('change', (e) => {
    const formData = new FormData()
    formData.append('name', '张三')
    formData.append('age', 28)
    formData.append('hobbies', ['篮球', '足球', '大保健'])
    formData.append('avatar', e.target.files[0])
    axios.post('http://localhost:1085/api/user', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
        Authorization: localStorage.getItem('token')
      }
    }).then(res => {
      console.log(res)
    })
  })
  fileDoms[1].addEventListener('change', (e) => {
    const formData = new FormData()
    formData.append('name', '张三')
    formData.append('age', 28)
    formData.append('hobbies', ['篮球', '足球', '大保健'])
    Array.from(e.target.files).forEach(item => {
      formData.append('avatar', item)
    })
    axios.post('http://localhost:1085/api/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
        Authorization: localStorage.getItem('token')
      }
    }).then(res => {
      console.log(res)
    })
  })



  btnDoms.forEach(item => {
    item.addEventListener('click', () => {
      switch (item.innerText) {
        case '生成Token':
          fetch('http://localhost:1085/api/token', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({
              username: 'admin',
              password: 'cz1085'
            })
          })
            .then(res => res.json())
            .then(res => {
              localStorage.setItem('token', res.data)
            })
          break
        case '删除Token':
          localStorage.removeItem('token')
          break
        case '上传':
          break
        case '下载':
          break
        case '查询':
          axios.get('http://localhost:1085/api/user', {
            params: {
              name: 'A',
              gender: '1',
              // a: 1
            }
          }).then(res => {
            console.log(res)
            imgDom.src = res.data.data.find(item => item.avatar).avatar
          })
          break
        case '新增':
          axios.post('http://localhost:1085/api/user', {
            // name: '张三',
            // age: 18,
            // hobbies: ['篮球', '足球']
            name: '田七TIAN',
            enName: 'TIAN',
            gender: '1',
            age: 26,
            score: undefined,
            // a: 1
          }).then(res => {
            console.log(res)
          })
          break
        case '修改':
          axios.put(`http://localhost:1085/api/user/${1}`, {
            name: '张三ZHANG',
            enName: 'ZHANG',
            // a: 1
          }).then(res => {
            console.log(res)
          })
          break
        case '删除':
          axios.delete(`http://localhost:1085/api/user/${15}`).then(res => {
            console.log(res)
          })
          break
        case 'OpenSocket':
          socket = io('http://localhost:1085', {
            path: '/ws',
            query: {
              name: '张三'
            },
            extraHeaders: {
              Authorization: localStorage.getItem('token')
            },
            // 连接失败时重连次数（默认Infinity）
            reconnectionAttempts: 'Infinity',
          })
          socket.on('connect', () => {
            console.log('connect客户端：连接成功！')
          })

          socket.on('message', (msg) => {
            console.log(msg)
          })
          socket.on('anything', (msg) => {
            console.log('anything：',msg)
          })
          socket.on('disconnect', () => {
            console.log('disconnect客户端：断开连接！')
          })
          socket.on('myEvent', (e) => {
            console.log('服务器自定义事件：', e)
          })
          break
        case 'SendSocket':
          socket.send('客户端：发送消息！')
          break
        case 'CloseSocketServer':
          socket.send({close: true})
          break
      }
    })
  })
</script>

</html>
